<template>
  <div class="box">
    <el-tree
      :data="data"
      :props="defaultProps"
      show-checkbox
      node-key="layerCode"
      default-expand-all
      backgroundColor="#000"
      @node-click="handleNodeClick"
      ref="treeol"
      @check-change="handleCheckChange"
    >
      <template #default="{ node, data }">
        <div class="ric">
          <span :class="{ 'text-color-change': node.checked }">{{ data.layerName }}</span>
          <span v-if="data.layerTableChart"><i class="bgicon"></i></span>
        </div>
      </template>
    </el-tree>
  </div>
</template>

<script setup>
import { getSysMapLayerList } from '../../../api/sysmaplayer.js'
import { onMounted, inject } from 'vue'
import { createPoint, addMapLayer, delMapLayer } from '../../../api/gis2d/maputils'
import { loadFilterLayer, loadEarthQuakeYXC, delEarthQuakeYXC } from '../../../api/gis2d/mapbase'
import { useMapStoreStore } from '../../../stores/index'
import {useUserStore} from '@/store/modules/user'
const data = ref([])
const store = useMapStoreStore();
const userInfo = useUserStore();
const defaultProps = {
  children: 'children',
  label: 'layerName'
}
const defaultChenck = ref([''])
const getData = async () => {
  getSysMapLayerList().then((res) => {
    
    // var newRes = res.filter(e=> !e.statu)
    data.value = res;
    //   nextTick(() => {
    //   treeol.value.setCheckedKeys(['kspgyxcm'])
    //   setTimeout(() => {
    //       treeol.value.setCheckedKeys([])
    //   }, 100);
    // })
  })
}
const treeol = ref()
let oldLaycode = []
watch(
  () => store.layerData,
  (newval) => {
    // var treeCheck = treeol.value.getCheckedKeys().filter((e) => {
    //   return newval.indexOf(e) > -1
    // })
    // treeol.value.setCheckedKeys(oldLaycode ? treeCheck : newval)
    // nextTick(() => {
    //   oldLaycode = treeol.value.getCheckedKeys()
    //   console.log(oldLaycode)
    // })
    var newarrs = []
    treeol.value.getCheckedNodes().forEach((element) => {
      if (element.children.length == 0) {
        newarrs.push(element.layerCode)
      }
    })
    

    // var a = treeol.value.getCheckedKeys() //已经点击的节点
    var newarr = []
    for (const element of newarrs) {
      var index = oldLaycode.indexOf(element)
      if (index > -1) {
        continue
      }
      newarr.push(element)
    }
    treeol.value.setCheckedKeys([...newarr, ...newval])
    oldLaycode = newval
  }
)
const mimeMap = {
  zxzzzj: [
    {
      id: 51,
      title: '中心站（震中距）',
      type: 'table',
      data: 'zxz'
    }
  ],
   lsczdz: [
    {
      id: 311,
      title: '不同震级区间成灾地震个数',
      type: 'chart',
      data: 'czdz'
    }
  ],
  lsdz: [
    {
      id: 5,
      title: '不同震级区间历史地震个数',
      type: 'chart',
      data: 'lsdz'
    }
  ],
  rkwg: [
    {
      id: 6,
      title: '人口总数统计',
      type: 'chart',
      data: 'rk'
    },
    {
      id: 7,
      title: '人口密度统计',
      type: 'chart',
      data: 'rkmd'
    }
  ],
  yy: [
    {
      id: 8,
      title: '各烈度区医院统计',
      type: 'chart',
      data: 'yy'
    }
  ],
  xx: [
    {
      id: 9,
      title: '各烈度区学校统计',
      type: 'chart',
      data: 'xx'
    }
  ],
  sk: [
    {
      id: 10,
      title: '各烈度区水库统计',
      type: 'chart',
      data: 'sk'
    }
  ],
  lshpfb: [
    {
      id: 11,
      title: '各烈度区地质灾害统计',
      type: 'chart',
      data: 'hp'
    }
  ],
    hpwxx: [
    {
      id: 11,
      title: '各烈度区滑坡统计',
      type: 'chart',
      data: 'hp'
    }
  ],
  jjwg: [
    {
      id: 12,
      title: '经济总数统计',
      type: 'chart',
      data: 'jj'
    },
    {
      id: 13,
      title: '经济密度统计',
      type: 'chart',
      data: 'jjmd'
    }
  ],
  jt: [
    {
      id: 14,
      title: '距离最近交通线',
      type: 'table',
      data: 'jt'
    }
  ]
}

let layerCodeName = ''
const handleCheckChange = (data, checked) => {
  if (checked) {
    let { layerUrl, layerCode, layerOrder, memo } = data
   
    if (layerUrl) {
      store.addTree(layerCode);
      var index = layerUrl.indexOf(',');
      if(index > -1){
        var urlArr = layerUrl.split(',');
        var i = 0;
        for (const item of urlArr) {
           addMapLayer(item, layerCode + i, layerOrder, store.eqid, memo, store.earthquakeInfo.version)
           i++;
        }
      }else{
          addMapLayer(layerUrl, layerCode, layerOrder, store.eqid, memo, store.earthquakeInfo.version)
      }
    
    }

    if (!sessionStorage.getItem('handelClick') || sessionStorage.getItem('handelClick') == '') {
      isUpdateChart(data)
    }
  } else {
    const { layerCode, layerUrl, memo } = data
    if (layerUrl) {
       var index = layerUrl.indexOf(',');
      if(index > -1){
        var urlArr = layerUrl.split(',');
        var i = 0;
        for (const item of urlArr) {
             delMapLayer(layerCode + i)
           i++;
        }
      }else{
           delMapLayer(layerCode)
      }
    }
    store.delTree(layerCode)
    delupdateComponentsData(data)
    // store.delLayer([layerUrl])
  }
}

const isUpdateChart = (data) => {
  if (data.layerTableChart) {
    if (layerCodeName) {
      store.updateComponentsData([])
      layerCodeName = ''
    }

    layerCodeName = data.layerCode
    setTimeout(() => {
      store.updateComponentsData(mimeMap[data.layerCode])
    }, 0)
  }

  if (layerCodeName === data.layerCode && data.layerTableChart) {
    store.updateComponentsData([])
  }
}
const delupdateComponentsData = (data) => {
  if (layerCodeName === data.layerCode && data.layerTableChart) {
    store.updateComponentsData([])
  }
}

onMounted(() => {
  getData()
})
</script>

<style lang="scss" scoped>
.box {
  height: 100%;
  overflow-y: auto;
  // 滚动条整体部分
  &::-webkit-scrollbar {
    width: 6px;
    height: 8px;
  }
  &::-webkit-scrollbar-button {
    display: none;
  }
  &::-webkit-scrollbar-thumb {
    background: #01c2ff;
    cursor: pointer;
    border-radius: 4px;
  }
  &::-webkit-scrollbar-corner {
    display: none;
  }
  &::-webkit-resizer {
    display: none;
  }
}
.el-tree {
  background-color: transparent;
  color: #e3e3e3;
  font-size: 16px;
}
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: transparent !important;
}
:deep(.el-checkbox__input.is-checked .el-checkbox__inner:after) {
  border-color: #01c2ff;
}
:deep(.el-checkbox__inner) {
  background-color: transparent;
}
:deep(.el-tree-node__content) {
  display: flex;
  align-items: center;
}

:deep(.el-tree-node__content:hover) {
  background-color: transparent;
}
.el-tree-node:hover {
  background-color: transparent !important;
}

:deep(.el-tree-node:focus > .el-tree-node__content) {
  background-color: transparent !important;
  color: #01c2ff;
}

:deep(.el-tree-node__expand-icon) {
  color: #fff;
}
.text-color-change {
  color: #01c2ff; /* 或者其他颜色 */
}
.ric {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px 0 0;
  box-sizing: border-box;
  color: #b9eeff;
}
.bgicon {
  display: inline-block;
  width: 20px;
  height: 20px;

  background-image: url(/static/assets/chart.png);
  background-size: 100% 100%;
}
</style>
